<template>
    <div>
        <el-breadcrumb  separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><i class="el-icon-user"></i> 系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8" v-has-permission="'sys:user:search'">
                    <el-input placeholder="请输入用户名称" v-model="userName" >
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4" v-has-permission="'sys:user:add'">
                    <el-button type="primary">新增用户</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="users"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="createtime"
                        label="日期"
                        width="180"
                        :formatter="dateFormat">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="roles"
                        label="角色">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="250">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
                        <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
                        <el-button @click="openRole(scope.row)" type="warning" size="small">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.total">
            </el-pagination>
        </el-card>


        <el-dialog
                :close-on-click-modal="true"
                title="分配角色"
                :visible.sync="assignDialogVisible"
                width="50%">
            <el-transfer
                    v-model="hasRole"
                    :data="roles"
                    :props="{
                        key: 'id',
                        label: 'name'
                    }"
                    :titles="['系统角色','拥有角色']">
            </el-transfer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="assignDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRole">确 定</el-button>
           </span>
        </el-dialog>
    </div>
</template>


<script>

    import {getData,postData,deleteData,putData} from "../../api";
    import * as fecha from 'element-ui/lib/utils/date';
    export default {
        name: "User",

        mounted() {  
            this.getUsers();
            this.getRoles();

        },
        methods: {
            dateFormat(row, column, cellValue) {
                return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd'):'';
            },
            async saveRole() {
                const userRole = this.hasRole.map(roleId => {
                    return {
                        roleId: roleId,
                        userId: this.user.id
                    }
                })

                const roleNames = this.roles.filter(r => {
                    if (this.hasRole.lastIndexOf(r.id) !== -1) {
                        return true;
                    }
                }).map(r => r.name).join(',') || '-1'

                const res = await postData('/sys/userRole/' + this.user.id + '/' + roleNames, userRole)
                if(res.code===SUCCESS_CODE){
                    this.user.roles=roleNames;
                    this.assignDialogVisible=false;
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            },

            async getRoles() {
                const res = await getData('/sys/role/all')
                if (res.code === SUCCESS_CODE) {
                    this.roles = res.data;
                }
            },

            async openRole(userInfo) {
                this.assignDialogVisible = true;
                this.user = userInfo;
                const res = await getData('sys/userRole/' + userInfo.id)
                if(res.code===SUCCESS_CODE){
                    this.hasRole=res.data;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            async getUsers() {
                const res = await getData('/sys/user')
                if(res.code===SUCCESS_CODE){
                    this.users=res.data.data;
                    this.total=res.data.total;
                }
            }
        },
        data(){
            return{
                roles:[],
                user:{},
                total:-1,
                assignDialogVisible:false,
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,
                userName: '',
                users: [],
                hasRole:[]
            }
        }
    }
</script>

<style scoped>

</style>
